<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryForm" inline v-show="showSearch">
      <el-form-item label="报警人" prop="reporter">
        <user-select v-model="queryForm.reporter" placeholder="请选择报警人"/>
      </el-form-item>
      <el-form-item label="处理人" prop="handler">
        <user-select v-model="queryForm.handler" placeholder="请选择处理人"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
          <el-option v-for="status in alarmRecordStatusMap" :value="status.value" :label="status.label"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报警类型" prop="alarmType">
        <el-select v-model="queryForm.alarmType" placeholder="请选择报警类型" clearable>
          <el-option v-for="alarm in alarmTypeMap" :value="alarm.value" :label="alarm.label"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getAlarmRecordList">搜索</el-button>
        <el-button icon="Refresh" @click="resetQueryForm">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-tools mb8">
      <div>
        <el-button type="primary"
                   icon="SetUp"
                   plain
                   :disabled="multipleHandleBtn"
                   v-hasPermi="['core:alarm-record:handle']"
                   @click="handleMultipleAlarmRecord">处理</el-button>
        <el-button type="danger"
                   icon="Delete"
                   plain
                   @click="handleDeleteAlarmRecordList"
                   v-hasPermi="['core:alarm-record:remove']">删除</el-button>
      </div>
      <div>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getAlarmRecordList"/>
      </div>
    </div>

    <el-table :data="recordList"
              ref="recordList"
              v-loading="recordLoading"
              @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection"/>
      <el-table-column align="center" type="index" label="序号" width="80"/>
      <el-table-column align="center" label="报警">
        <template #default>
          <el-table-column align="center" prop="reporter.userName" label="工号"/>
          <el-table-column align="center" prop="reporter.nickName" label="姓名"/>
          <el-table-column align="center" prop="reporter.dept.deptName" label="部门"/>
          <el-table-column align="center" prop="alarmType" label="报警类型" :formatter="alarmTypeFormatter"/>
          <el-table-column align="center" prop="createTime" label="时间" width="160"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="处理">
        <template #default>
          <el-table-column align="center" prop="handler.userName" label="工号">
            <template #default="{row}">
              <span v-if="row.status === alarmRecordStatus.Processed.value">{{row.handler !==null? row.handler.userName : ''}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="handler.nickName" label="姓名">
            <template #default="{row}">
              <span v-if="row.status === alarmRecordStatus.Processed.value">{{row.handler !==null? row.handler.nickName : ''}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="handleTime" label="处理时间" width="160">
            <template #default="{row}">
              <span v-if="row.status === alarmRecordStatus.Processed.value">{{row.handleTime}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="处理结果">
            <template #default="{row}">
              <span v-if="row.status === alarmRecordStatus.Processed.value">{{row.remark}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" :formatter="statusFormatter"/>
      <el-table-column align="center" label="操作" width="160">
        <template #default="{row}">
          <el-button v-if="row.status === alarmRecordStatus.Pending.value"
                     type="primary"
                     link
                     icon="SetUp"
                     v-hasPermi="['core:alarm-record:handle']"
                     @click="handleAlarmRecord(row)">处理</el-button>
          <el-button type="primary"
                     link
                     icon="Delete"
                     v-hasPermi="['core:alarm-record:remove']"
                     @click="handleDeleteAlarmRecord(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="recordTotal"
                v-model:page="queryForm.pageNum"
                v-model:limit="queryForm.pageSize"
                @pagination="getAlarmRecordList"/>

    <el-dialog v-model="handleAlarmDialogVisible"
               title="报警处理"
               :close-on-press-escape="false"
               :close-on-click-modal="false"
               append-to-body>
      <template #default>
        <el-form :model="handleAlarmForm" :rules="handleAlarmFormRules" ref="handleAlarmFormRef">
          <el-form-item label="处理意见" prop="remark">
            <el-input type="textarea"
                      v-model="handleAlarmForm.remark"
                      :rows="5"
                      :maxlength="255"
                      show-word-limit
                      placeholder="请填写处理意见"/>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="submitHandleForm">确定</el-button>
        <el-button @click="cancelSubmitHandleForm">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {getAlarmRecordList,deleteAlarmRecord,handleAlarmRecord} from "../../../api/core/alarmRecord";
import {alarmType, alarmTypeMap} from "../../../constant/alarmType";
import {alarmRecordStatus, alarmRecordStatusMap} from '../../../constant/alarmRecordStatus';

export default {
  name: "index",
  data() {
    return {
      alarmType,
      alarmTypeMap,
      alarmRecordStatus,
      alarmRecordStatusMap,
      queryForm: {
        reporter: '',
        handler: '',
        alarmType: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      showSearch: true,
      recordLoading: false,
      recordList: [],
      recordTotal: 0,
      alarmRecordTableMultiple: true,
      multipleHandleBtn: true,
      handleAlarmDialogVisible: false,
      handleAlarmForm: {
        recordIds: [],
        remark: ''
      },
      handleAlarmFormRules: {
        remark: [
          {required: true, message: '请填写处理意见', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getAlarmRecordList()
  },
  methods: {
    resetQueryForm() {
      this.queryForm = {
        reporter: '',
        handler: '',
        alarmType: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getAlarmRecordList()
    },
    getAlarmRecordList() {
      this.recordLoading = true
      getAlarmRecordList(this.queryForm).then(res => {
        const {rows, total} = res
        this.recordList = rows
        this.recordTotal = total
      }).finally(() => {
        this.recordLoading = false
      })
    },
    alarmTypeFormatter(row) {
      return this.alarmTypeMap[row.alarmType]?.label
    },
    handleSelectionChange(selection) {
      console.log(selection)
      this.alarmRecordTableMultiple = !selection.length

      this.multipleHandleBtn = !selection.filter(item => item.status === alarmRecordStatus.Pending.value).length
    },
    async deleteAlarmRecord(recordIds) {
      await deleteAlarmRecord(recordIds)

      this.getAlarmRecordList()
      this.$modal.msgSuccess('删除成功')
    },
    async handleDeleteAlarmRecord(row) {
      await this.$modal.confirm('您确定要删除此条数据吗？')

      const recordIds = [row.id]
      await this.deleteAlarmRecord(recordIds)
    },
    async handleDeleteAlarmRecordList() {
      const rows = this.$refs.recordList.getSelectionRows()
      console.log('1212',rows)
      const recordIds = rows.map(item => item.id)
      console.log('121212',recordIds)
      await this.$modal.confirm('您确定要删除勾选的数据吗？')
      await this.deleteAlarmRecord(recordIds)
    },
    statusFormatter(row) {
      return this.alarmRecordStatusMap[row.status]?.label
    },
    handleAlarmRecord(row) {
      this.resetHandleForm()
      this.handleAlarmForm.recordIds = [row.id]
      this.handleAlarmDialogVisible = true
    },
    handleMultipleAlarmRecord() {
      const rows = this.$refs.recordList.getSelectionRows()
      this.handleAlarmForm.recordIds = rows.filter(item => item.status === alarmRecordStatus.Pending.value).map(item => item.id)
      this.handleAlarmDialogVisible = true
    },
    resetHandleForm() {
      this.handleAlarmForm = {
        recordIds: [],
        remark: ''
      }
      if (this.$refs.handleAlarmFormRef) {
        this.$refs.handleAlarmFormRef.clearValidate()
      }
    },
    submitHandleForm() {
      if (this.handleAlarmForm.recordIds.length < 1) {
        this.$modal.msgError('请先选择报警记录')
      }

      this.$refs.handleAlarmFormRef.validate(valid => {
        if (!valid) {
          return
        }
        handleAlarmRecord(this.handleAlarmForm).then(res => {
          this.$modal.msgSuccess('处理成功')
          this.getAlarmRecordList()
          this.handleAlarmDialogVisible = false
        })
      })
    },
    cancelSubmitHandleForm(){
      this.handleAlarmDialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
